<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:f="http://xmlns.jcp.org/jsf/core">   
    <h:head>
        <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"/>
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,700italic,400,700" rel="stylesheet" type="text/css"/>
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link rel="icon" href="/assets/img/ico/favicon.ico" type="image/x-icon"/>
        <link href="css/startbootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="css/about.css" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/contact.css" rel="stylesheet" type="text/css"/>        
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/skeleton.css" rel="stylesheet" type="text/css"/>        
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
        <script src="js/html5shiv.js" type="text/javascript"></script>
        <script src="js/respond.min.js" type="text/javascript"></script>
    </h:head>

    <h:body>
        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="/BluePumpkinCompany/Login.xhtml">Pumpkin</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="/help" title="Help with Start Bootstrap Templates &amp; Themes">Help</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>


        <header class="sb-page-header">
            <div class="container">
                <h1>Help</h1>
                Website is designed to manage the events and activities for the employees in the company. Activities including games, sports events, music.....direction to tighten the good friendship relationship among employees in the company and company gives employees a strong spiritual life represents the life of the company policy.
            </div>
        </header>

        <!-- Page Content -->
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="/index.html">Blue Pumpkin Company</a></li>
                <li class="active">Help</li>
            </ol>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h3>Contact Form</h3>
                    <p>Contact Form is we will answer your questions.</p>
                    <h:form id="contact-form">
                        <h:inputText id="txtName" styleClass="form-control" p:placeholder="Name" required="true" requiredMessage=" * Please enter Name ! " validatorMessage="* Name Length is less than allowable minimum of '2' and maximum of '50'">
                            <f:validateLength for="txtName" minimum="2" maximum="50"/>
                        </h:inputText>
                        <h:message for="txtName" style="color:red" />
                        <br/>
                        <h:inputText id="txtEmail" value="#{contactUs.sender}" styleClass="form-control" p:placeholder="Email" required="true" requiredMessage=" * Please enter Email ! " validatorMessage=" * Please enter a valid Email !">
                            <f:validateRegex pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"/>
                        </h:inputText>
                        <h:message for="txtEmail" style="color:red"/>
                        <br/>
                        <h:inputText id="txtSubject" value="#{contactUs.subject}" styleClass="form-control"  p:placeholder="Subject" required="true" requiredMessage=" * Please enter Subject ! " validatorMessage="* Name Length is less than allowable minimum of '2' and maximum of '50'">
                            <f:validateLength for="txtName" minimum="2" maximum="50"/>
                        </h:inputText>
                        <h:message for="txtSubject" style="color:red"/>
                        <br/>
                        <h:inputTextarea id="txtMessage" value="#{contactUs.message}" styleClass="form-control"  p:placeholder="Message" required="true" requiredMessage=" * Please enter Message ! " validatorMessage="* Name Length is less than allowable minimum of '2' and maximum of '999'">
                            <f:validateLength for="txtMessage" minimum="2" maximum="999"/>
                        </h:inputTextarea>
                        <h:message for="txtMessage" style="color:red"/>
                        <br/>
                        <h:outputLabel id="txtStatus"/>
                        <div>   
                            <h:commandButton id="btnReset" p:type="reset" value="Reset" class="link btns"/>
                            <h:commandButton id="btnSend" type="submit" value="Send" class="link btns" action="#{contactUs.send()}"></h:commandButton>
                        </div>

                        <div class="modal fade response-message">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title">Modal title</h4>
                                    </div>
                                    <div class="modal-body">
                                        You message has been sent! We will be in touch soon.
                                    </div>      
                                </div>
                            </div>
                        </div>
                         <hr/> 
                    </h:form> 
                </div>
            </div>
        </div>
        <footer>
           
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 footer-below">
                        <p><a href="http://www.startbootstrap.com">Blue Pumpkin</a> is a project maintained by Group 1 - C1209I.
                            <br/>copy; Copyright Blue Pumpkin 2014</p>
                    </div>
                </div>
            </div>
        </footer>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="/assets/js/docs.js"></script>
        <script src="/assets/js/startbootstrap.js"></script>
    </h:body>

</html>